<!-- 医生聊天室 -->
<template>
  <TopNavigation leftText="医生问诊室" rightText="" :inToHome="true" />
  <view
    id="chatContainer"
    class="h-[calc(100vh-140rpx-60rpx)] w-[100%] items-center flex-col flex"
    style="overflow: hidden; overflow: scroll"
  >
    <!-- 咨询剩余时间 -->
    <view class="bg-[#ffffff] justify-between flex h-80rpx w-[100%] items-center">
      <text
        class="ml-15rpx tracking-[0rpx] text-[#16c2a3] text-center lh-normal font-medium text-[26rpx]"
      >
        咨询中
      </text>
      <view style="display: flex" class="mr-15rpx">
        <text class="tracking-[0rpx] text-[#3c3e42] lh-normal font-regular text-[26rpx]">
          剩余时间：
        </text>
        <wd-count-down :time="time" custom-class="djs" @finish="finish" />
      </view>
    </view>
    <!-- 患者卡片 -->
    <PatientCard :UserObject="UserData[0]" />
    <!-- 温馨提示 -->
    <view class="wxts">
      <text class="tracking-0rpx text-left text-[#16c2a3] leading-48rpx font-regular text-24rpx">
        温馨提示：
      </text>
      <text
        class="tracking-[0rpx] text-[24rpx] text-left text-[#848484] font-regular leading-[48rpx]"
      >
        在线咨询不能代替面诊，医护人员建议仅供参考
      </text>
    </view>
    <!-- 提示信息 -->
    <view class="wxtss">
      <text
        class="tracking-[0rpx] text-[24rpx] text-left text-[#848484] font-regular leading-[48rpx]"
      >
        医护人员正在赶来，请耐心等候
      </text>
    </view>
    <!-- 时间 -->
    <view class="wxtsss">
      <text
        class="tracking-[0rpx] text-[24rpx] text-left text-[#848484] font-regular leading-[48rpx]"
      >
        14:16:02
      </text>
    </view>
    <!-- 聊天信息 -->
    <view v-for="item in data" class="w-[100%]">
      <!-- 医生对话框 -->
      <view v-if="item.type" class="mx-0 my-15rpx flex w-[100%]">
        <view class="mx-20rpx my-0">
          <img class="h-76rpx w-76rpx" src="@/static/exports/Avatar_doctor@1x.png" alt="" />
        </view>

        <view style="max-width: 80%">
          <text class="tracking-[0rpx] lh-normal text-[26rpx] font-regular text-[#979797]">
            王医生
          </text>
          <view class="p-20rpx bg-[#ffffff] rounded-[20px]">
            <wd-text :text="item.text" custom-class="wd-textA"></wd-text>
          </view>
        </view>
      </view>
      <!-- 患者对话框 -->
      <view v-else class="mx-0 my-15rpx justify-end flex w-[100%]">
        <view class="items-end flex-col flex max-w-[80%]">
          <text class="tracking-[0rpx] lh-normal text-[26rpx] font-regular text-[#979797]">
            {{ UserData[0].name }}
          </text>
          <view class="p-20rpx bg-[#ffffff] rounded-[20px]">
            <wd-text :text="item.text" custom-class="wd-textA"></wd-text>
          </view>
        </view>
        <view class="mx-20rpx my-0">
          <img class="h-76rpx w-76rpx" src="@/static/exports/Avatar_default@1x.png" alt="" />
        </view>
      </view>
    </view>
  </view>

  <!-- 底部发送框 -->
  <view class="inputa">
    <wd-input
      v-model="inputValue"
      type="text"
      placeholder="问医生"
      :no-border="true"
      custom-class="inputType"
    />
    <wd-icon
      name="file-image"
      size="20px"
      color="#979797"
      custom-class="iconType"
      @click="handleClick()"
    ></wd-icon>
  </view>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, onUnmounted, reactive, ref, nextTick } from "vue";
import { socket } from "./socket";
//顶部标题组件
import TopNavigation from "@/components/TopNavigation.vue";
// 患者卡片组件
import PatientCard from "@/components/PatientCard.vue";
import { LoginPinia } from "@/store";
import { OrderTyle } from "@/types/consult";

const inputValue = ref<string>("");

const loginValue = LoginPinia();
// 聊天用户过度数据
const UserData = ref<OrderTyle[]>([
  {
    OrderNumber: "string",
    PaymentIsDone: "string",
    age: "31",
    description: "头痛，头晕，恶心",
    identity: "string",
    img: [],
    money: 0,
    name: "李富贵",
    record: "未去过医院",
    sex: "男",
    time: "一周内",
    creatTime: "未去过医院",
    docName: "未去过医院",
    department: "未去过医院",
    professionalTitle: "未去过医院",
    hospital: "string",
    coupon: 0,
    points: 0,
    paymentType: "未去过医院",
  },
]);
const time = ref<number>(30 * 60 * 60 * 1000);
const targetUserId = ref("孟少鹏"); // 从订单/会话信息中获取实际值
// 对话数据
const data = ref<{ type: boolean; text: string }[]>([]);

function finish() {
  console.log("咨询时间到");
}

// 组件挂载前让socket连接起来
onBeforeMount(() => {
  socket.connect();
});

onMounted(() => {
  socket.emit("setUser", "张三");
  // 监听接收消息
  socket.on("onMessage", (e: { senderId: string; content: string }) => {
    const isDoctor = e.senderId === targetUserId.value; // 根据业务逻辑调整判断条件
    handleMessage(isDoctor, e.content);
  });

  if (loginValue.record[0]) {
    UserData.value.unshift(loginValue.record[0] as OrderTyle);
  }
});

// // 组件销毁时断开连接
onUnmounted(() => {
  socket.disconnect();
  console.log("断开连接");
});

// 收发消息+滚到底部
const handleMessage = (boolean: boolean, val: string) => {
  data.value.push({ type: boolean, text: boolean ? val : inputValue.value });
  // 滚动到底部
  nextTick(() => {
    const chatContainer = document.getElementById("chatContainer");
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  });
};

// 点击btn发送socket消息
const handleClick = () => {
  if (inputValue.value && targetUserId.value) {
    socket.emit("newMessage", {
      targetUserId: targetUserId.value,
      content: inputValue.value,
    });
    // 本地添加消息（患者消息）
    handleMessage(false, "");
    inputValue.value = "";
  }
};

// 监听键盘事件
document.addEventListener("keydown", (e) => {
  if (e.key == "Enter") {
    // 发送消息
    if (inputValue.value != "") {
      handleClick();
    }
  }
});
</script>
<style lang="scss" scoped>
.djs {
  font-size: 26rpx !important;
  font-weight: regular !important;
  line-height: normal !important;
  color: #3c3e42 !important;
  letter-spacing: 0rpx;
}
.wxts {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  padding: 10rpx 20rpx;
  margin: 50rpx 0;
  background: #ffffff;
  border-radius: 40rpx;
}
.wxtss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 10rpx 20rpx;
  background: #ffffff;
  border-radius: 40rpx;
}
.wxtsss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  padding: 10rpx 20rpx;
  margin-top: 30rpx;
  margin-bottom: 50rpx;
  background: #ffffff;
  border-radius: 40rpx;
}
.inputa {
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15rpx 20rpx;
  background-color: #ffffff;
}
.inputType {
  width: 75%;
  padding: 18rpx 20rpx;
  background: #fafafa;
  border-radius: 50px;
}
.iconType {
  margin-left: 20rpx;
}
.wd-textA {
  width: 100% !important;
  font-size: 30rpx !important;
  font-weight: regular;
  line-height: 46rpx !important;
  color: #3c3e42 !important;
  text-align: left !important;
  letter-spacing: 0rpx;
}
</style>
